<template>
  <div class="blacklist-content">
    <Row :gutter="12">
      <Col span="4"><Input placeholder="IP" v-model="queryObj.ip"/></Col>
      <Col span="4"><Button type="primary" @click="handleSearch()">查询</Button></Col>
    </Row>

    <div class="panel-count">共 <span class="count-number">{{this.total.toLocaleString()}}</span> 条数据({{this.spendTime}} 秒)</div>
    <Card>
      <tables :loading="loading" stripe ref="tables" v-model="tableData" :columns="columns"/>
      <Page class="panel-page" :total="total" :current="page" :page-size="size" @on-change="changePage" show-elevator />
    </Card>
  </div>
</template>

<script>
import Tables from '_c/tables'
import { apiSearch, apiUnBlacklist } from '@/api/blacklist'
import {apiResult} from "@/libs/util";
export default {
  name: 'Blacklist',
  components: {
    Tables
  },
  data () {
    return {
      columns: [
        { title: '设备类型', key: 'deviceType', sortable: false },
        { title: 'IP', key: 'ip', sortable: false },
        { title: '错误代码', key: 'returnCode', sortable: false },
        { title: '错误信息', key: 'errorMsg', sortable: false },
        { title: '状态', key: 'status', sortable: false },
        { title: '拉入黑名单时间', key: 'lastBlacklistTime', sortable: false },
        {
          title: '解除黑名单',
          key: 'action',
          width: 100,
          render: (h, params) => {
            return h('div', [
              h('button', {
                style: {
                  width: '50px',
                  height: '30px',
                  borderRadius: '5px'
                },
                class: 'log_data',
                dataClipboardText: params.row,
                on: {
                  click: () => {
                    let id = params.row.id
                    if (id !== null) {
                      // 移除黑名单
                      // console.log(id)
                      this.handleUnBlacklist(id)
                      this.getData()
                    }
                  }
                }
              }, '解除')
            ])
          }
        }
      ],
      tableData: [],
      page: 1,
      size: 10,
      total: 0,
      spendTime: 0,
      queryObj: {
        ip: ''
      },
      loading: false
    }
  },
  methods: {
    // 获取数据
    getData () {
      this.loading = true
      const param = JSON.stringify(this.queryObj)
      apiSearch(this.page, param).then(res => {
          apiResult(res.data,false,result=>{
            this.total = res.data.data.total
            this.page = res.data.data.page
            this.spendTime = res.data.data.spendTime
            this.tableData = res.data.data.content
            this.loading = false
          })
      })
    },
    // 点击页码
    changePage (page) {
      this.page = page
      this.getData()
    },
    handleSearch () {
      this.page = 1
      this.getData()
    },
    handleUnBlacklist (id) {
      apiUnBlacklist(id).then(res => {
        apiResult(res.data,true,);
      })
    }
  },
  mounted () {
    this.page = 1
    this.getData()
  }
}
</script>

<style lang="less">
  @import "./Blacklist";
</style>
